﻿@model ChargifySampleSite.MVC3.Models.LocalSubscriptionViewModel

@{
    ViewBag.Title = "Subscribe";
}

@section head {
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
}
@section menu {
    <div class="hlist">
	    <ul>
		    <li>@Html.ActionLink("Home", "Index", "Home")</li>
		    <li>@Html.ActionLink("Plans", "Plans", "Home")</li>
		    <li class="active"><strong>Subscribe (Local)</strong></li>
	    </ul>
    </div>
}
@section leftContent {
    <h2>@ViewBag.PlanName Plan</h2>
    <div class="info">
        <p>On this page, the user is required to complete the form which allows the system to both create a user, and create a corresponding customer in the associated Chargify account.</p>
        <p>When the user clicks on the 'Place My Order' button, the system will create an ASP.NET membership user first, then create the Chargify customer second.</p>
        <p><i>You can simulate a non-working credit card by using '2' as the number instead of the default '1' ...</i></p>
    </div>
}

<p>Please enter the following information and click '<strong>Place My Order</strong>' to complete the signup process.</p>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(false)
    <div class="yform columnar">
        <div id="errorMessage" class="warning" style="visibility: hidden; display: none;">
            <h3>Uh Oh!</h3>
            <span>&nbsp;</span>
        </div>
        <fieldset>
            <legend>User Info</legend>
            <div class="type-text">
                @Html.LabelFor(model => model.Username)
                @Html.EditorFor(model => model.Username, new { @class = "required", @minLength = "5" })
                @Html.ValidationMessageFor(model => model.Username)
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.Password)
                @Html.EditorFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.ConfirmPassword)
                @Html.EditorFor(model => model.ConfirmPassword)
                @Html.ValidationMessageFor(model => model.ConfirmPassword)
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.Question)
                @Html.EditorFor(model => model.Question)
                @Html.ValidationMessageFor(model => model.Question)
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.Answer)
                @Html.EditorFor(model => model.Answer)
                @Html.ValidationMessageFor(model => model.Answer)
            </div>
        </fieldset>
              
        <fieldset>
            <legend>Personal Information</legend>

            <div class="type-text">
                @Html.LabelFor(model => model.Email)
                @Html.EditorFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.FirstName)
                @Html.EditorFor(model => model.FirstName)
                @Html.ValidationMessageFor(model => model.FirstName)
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.LastName)
                @Html.EditorFor(model => model.LastName)
                @Html.ValidationMessageFor(model => model.LastName)
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.Address)
                @Html.EditorFor(model => model.Address)
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.City)
                @Html.EditorFor(model => model.City)
            </div>

            <div class="type-select">
                @Html.LabelFor(model => model.Province)
                @Html.DropDownListFor(model => model.Province, new SelectList(ViewBag.Provinces, "Value", "Text"), "-- Please Select --", new { @class = "required" })
            </div>

            <div class="type-text">
                @Html.LabelFor(model => model.PostalCode)
                @Html.EditorFor(model => model.PostalCode)
            </div>

        </fieldset>

        @Html.Partial("_CreditCard", Model)

        <div class="type-button">
            <input type="submit" class="submit" value="Place My Order" />
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to Plans", "Plans", "Home")
</div>

